<!-- 地址选择 -->
<template>
	<view class="vk-data-input-address">
		<!-- 页面开始 -->
		<u-input
			v-if="showInput"
			type="select"
			:value="showTextCom"
			:modelValue="showTextCom"
			:placeholder="placeholder"
			:input-align="inputAlign"
			@click="isShow = true"
		></u-input>
		<!--地区选择器 :default-region="value.arr"-->
		<u-picker
			ref="address"
			mode="region"
			:value="isShow"
			:modelValue="isShow"
			:title="title"
			:safe-area-inset-bottom="true"
			:cancel-color="cancelColor"
			:confirm-color="confirmColor"
			:default-region="defaultRegionCom"
			:area-code="codesCom"
			:params="paramsCom"
			:confirm-text="confirmText"
			:cancel-text="cancelText"
			@input="onPopupShow"
			@confirm="onConfirm"
			@cancel="onCancel"
			@columnchange="onColumnchange"
		></u-picker>

		<!-- 页面结束 -->
	</view>
</template>

<script>
export default {
	name: "vk-data-input-address",
	emits: ["update:modelValue", "input", "confirm", "update:show"],
	props: {
		// 表单值
		value: {},
		modelValue: {},
		// 是否显示input
		showInput: {
			type: Boolean,
			default: true
		},
		show: {
			type: Boolean,
			default: false
		},
		// 提示
		placeholder: {
			Type: String,
			default: "请选择省市区"
		},
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false
		},
		// 是否有清空按钮
		clearable: {
			type: Boolean,
			default: true
		},
		// 顶部中间的标题
		title: {
			Type: String,
			default: "请选择省市区"
		},
		// 取消按钮的颜色
		cancelColor: {
			Type: String,
			default: "#606266"
		},
		// 确认按钮的颜色
		confirmColor: {
			Type: String,
			default: "#2979ff"
		},
		level: {
			type: Number,
			default: 3
		},
		confirmText: {
			type: String,
			default: "确认"
		},
		cancelText: {
			type: String,
			default: "取消"
		},
		inputAlign: {
			type: String
		},
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			isShow: false
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		init() {
			let that = this;
			let { valueCom, vk } = that;
		/* 	if (typeof valueCom == "string"){
				let res = that.addressDiscern(valueCom);
				if (res.code == 0) valueCom = res.data;
			} */
			if (!valueCom) valueCom = {};
			if (valueCom.province && !valueCom.province.code && valueCom.province.name) {
				that.$refs.address.getResult("confirm");
			}
		},
		// 向父组件发送更新value事件
		_updateValue(data) {
			let that = this;
			let { valueCom, vk } = that;
			if (!valueCom) valueCom = {};
			that.$set(valueCom, "province", data.province);
			that.$set(valueCom, "city", data.city);
			that.$set(valueCom, "area", data.area);
			that.$emit("input", valueCom);
			that.$emit("update:modelValue", valueCom);
			that.$emit("confirm", valueCom);
		},
		onPopupShow(value) {
			let that = this;
			that.isShow = value;
			that.$emit("update:show", value);
		},
		// 点击确定按钮，返回当前选择的值
		onConfirm(e) {
			let that = this;
			let { level } = that;
			let { province, city, area } = e;
			let data = {};
			if (level >= 1) {
				data.province = {
					code: province.code,
					name: province.name
				};
			}
			if (level >= 2) {
				data.city = {
					code: city.code,
					name: city.name
				};
			}
			if (level >= 3) {
				data.area = {
					code: area.code,
					name: area.name
				};
			}
			that._updateValue(data);
		},
		// 点击取消按钮，返回当前选择的值
		onCancel(e) {
			this.$emit("cancel", e);
		},
		onColumnchange(e) {
			this.$emit("columnchange", e);
		},
		// 获得数据源
		getDateSource() {
			return this.$refs.address.getDateSource();
		},
		// 智能识别收货地址
		addressDiscern(text){
			return this.$refs.address.addressDiscern(text);
		},
		// 智能识别省市区
		regionDiscern(text){
			return this.$refs.address.regionDiscern(text);
		}
	},
	// 监听器
	watch:{
		show(newVal){
			this.isShow = newVal;
		}
	},
	// 计算属性
	computed: {
		valueCom() {
			// #ifndef VUE3
			return this.value;
			// #endif

			// #ifdef VUE3
			return this.modelValue;
			// #endif
		},
		paramsCom() {
			let that = this;
			let { level } = that;
			let obj = {};
			if (level >= 1) {
				obj.province = true;
			}
			if (level >= 2) {
				obj.city = true;
			}
			if (level >= 3) {
				obj.area = true;
			}
			return obj;
		},
		showTextCom() {
			let that = this;
			let { level, valueCom } = that;
			let showText = "";
			if (valueCom && valueCom.province) {
				if (level >= 1) {
					showText += valueCom.province.name;
				}
				if (level >= 2) {
					showText += ` / ${valueCom.city.name}`;
				}
				if (level >= 3) {
					showText += ` / ${valueCom.area.name}`;
				}
			}
			return showText;
		},
		codesCom() {
			let that = this;
			let { level, valueCom } = that;
			let codes = [];
			if (valueCom && valueCom.province) {
				if (level >= 1) {
					codes.push(valueCom.province.code);
				}
				if (level >= 2) {
					codes.push(valueCom.city.code);
				}
				if (level >= 3) {
					codes.push(valueCom.area.code);
				}
			}
			if (!codes[0]) return undefined;
			return codes;
		},
		defaultRegionCom(){
			let that = this;
			let { level, valueCom } = that;
			let names = [];
			if (valueCom && valueCom.province) {
				if (level >= 1) {
					names.push(valueCom.province.name);
				}
				if (level >= 2) {
					names.push(valueCom.city.name);
				}
				if (level >= 3) {
					names.push(valueCom.area.name);
				}
			}
			return names;
		}
	}
};
</script>

<style lang="scss" scoped>
.vk-data-input-address {
	position: relative;
	-webkit-box-flex: 1;
	padding: 0px;
	border-color: rgb(220, 223, 230);
	text-align: left;
	width: 100%;
}
</style>
